<template>
  <div class="bg">
    <!-- <Header class="header" /> -->
    <!-- <img src="../assets/img/head.jpeg" /> -->
    <div class="logo">
      <div class="cha big all">茶</div>
      <div class="pao big all">泡</div>
      <div class="fan big all">饭</div>
      <!-- <div class="blog all">blog</div> -->
        <div class="heng"></div>
      <div class="heng er"></div>
      <div class="aka">AKA</div>
      <div class="bb">BEAUTIFUL&nbsp;BOY</div>
      <!-- <div class="heng san"></div> -->
    </div>
    <div class="text" ref="text">
      <!-- <div class="tit">有何不可 ——许高</div> -->
      <span class="content">天空好像下雨，因为好像天不晴。</span>
      <span class="content">傻站在你家楼下，在楼下傻站着。</span>
      <span class="content">如果场景里出现一架钢琴，就会多一架钢琴。</span>
      <span class="content">但是爷不会弹钢琴。</span><br>
      <span class="content">夏天快要过去，要过去的是夏季。</span>
      <span class="content">天凉就别穿短裙，天热别穿长裙。</span>
      <span class="content">如果有时不那么开心，那说明你在这时不开心。</span>
      <span class="content">那就等到你变开心~</span><br>
      <span class="content">为你唱这首歌，没有什么风格。</span>
      <span class="content">但有风格的歌，我就不唱给你。</span>
      <span class="content">为你解冻冰河，冰河也给你融化了。</span>
      <span class="content">没有冰河是凝固的。</span><br>
      <span class="content">为你唱这首歌，不是唱别的歌。</span>
      <span class="content">它仅仅代表着，我想唱这首歌。</span>
      <span class="content">为你辗转反侧，为你再转回来有何不可。</span>
      <span class="content">夏末秋凉里的一点温热，温里面带点热。</span>
      <span class="author">——许高</span>
    </div>
    <div class="shou" @click="shou" v-show="!f">&lt;</div>
    <div class="shou" @click="fang" v-show="f">&gt;</div>
  </div>
</template>

<script>
/* import Header from "../components/Header.vue"; */
export default {
  data(){
    return{
      f: false,
    }
  },
  components: {
    
  },
  methods:{
    shou(){
      this.f = !this.f;
      this.$refs.text.style.opacity = 0
    },
    fang(){
      this.f = !this.f;
      this.$refs.text.style.opacity = 1
    }
  },
};
</script>

<style scoped>
.heng{
  border-top: 3px solid rgba(255,255,255,0.9);
  transform: rotate(45deg);
  position: absolute;
  left: 140px;
  top: 480px;
  width: 150px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.4);
}
.san{
  transform: rotate(-45deg);
  width: 50px;
  top: 500px;
  left: 200px;
}
.er{
  top: 454px;
  left: 111px;
  width: 100px;
}
.bg {
    width: 100%;
    height: 100vh;
    background-image: url(../assets/img/head.jpeg);
    background-size:cover;
    background-position-y: 0px;
}
.header {
  position: absolute;
  height: 80px;
  width: 100vw;
}
/* img {
  width: 100%;
} */

/* logo */
.logo{
  font-weight:bolder;
  font-size: 40px;
  text-shadow: 0 5px 10px rgba(0,0,0,0.7) inset;
}
.cha{
  position: absolute;
  left: 100px;
  top: 100px;
  font-size: 200px;
  background-clip: text;
  color: transparent;
  background-image: url(../assets/img/lb.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0px 50px;
  z-index: 10;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,0.7));
  transition: 0.3s ease;
}
.blog{
  position: absolute;
  left: 120px;
  top: 260px;
  font-size: 130px;
  background-clip: text;
  color: transparent;
  background-image: url(../assets/img/锅巴壁纸.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 5px 20px;
  z-index: 9;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,0.7));
  transform: scaleX(1.3);
  transition: 0.3s ease;
}
.blog:hover{
  transform: scale(1.4,1.1);
  cursor: pointer;
  filter: drop-shadow(0 5px 10px rgba(190, 253, 255, 0.5));
}
.all{
  opacity: 0.8;
}
.pao{
  position: absolute;
  left: 250px;
  top: 230px;
  font-size: 100px;
  background-clip: text;
  color: transparent;
  background-image: url(../assets/img/ng1.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0px -10px;
  z-index: 11;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,0.7));
  transition: 0.3s ease;
}
.fan{
  position: absolute;
  left: 160px;
  top: 290px;
  font-size: 150px;
  background-clip: text;
  color: transparent;
  background-image: url(../assets/img/lz.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0px 40px;
  z-index: 8;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,0.7));
  transition: 0.3s ease;
}
.big:hover{
  transform: scale(1.1);
  cursor: pointer;
  filter: drop-shadow(0 5px 10px rgba(190, 253, 255, 0.5));
  z-index: 12;
}

.text{
  position: absolute;
  left: 100%;
  top: 120px;
  transform: translateX(-150%);
  width: 340px;
}
.text .content{
  font-family: 'YouYuan';
  display: block;
  height: 30px;
  line-height: 30px;
  text-shadow: 0 3px 5px rgba(0,0,0,0.7);
  color: rgb(243, 252, 224);
  transition: 0.3s ease;
}
.text .content:hover{
  transform: scale(1.1);
  color: rgb(240, 255, 153);
  cursor: pointer;
}
.author{
  transform: translateX(300px);
  font-family: 'YouYuan';
  display: block;
  height: 30px;
  line-height: 30px;
  text-shadow: 0 3px 5px rgba(0,0,0,0.7);
  color: rgb(243, 252, 224);
  transition: 0.3s ease;
}
.author:hover{
  transform: scale(1.3) translateX(270px);
  color: rgb(214, 237, 247);
  cursor: pointer;
}
.shou{
  font-size: 40px;
  transform: translateX(-120px);
  position: absolute;
  left: 100%;
  top: 150px;
  color: rgb(243, 252, 224);
  text-shadow: 0 3px 5px rgba(0,0,0,0.7);
  transition: 0.3s ease;
}
.shou:hover{
  cursor: pointer;
  transform: translateX(-120px) scale(1.5);
  text-shadow: 0 3px 5px rgba(207, 207, 207, 0.7);
  color: rgb(227, 251, 253);
}
.aka{
  position: absolute;
  z-index: 1;
  font-size: 25px;
  color: rgb(245, 245, 245);
  font-weight:lighter;
  left: 208px;
  top: 472px;
  text-shadow: 0 3px 5px rgba(0,0,0,0.7);
}
.bb{
  position: absolute;
  z-index: 1;
  font-size: 20px;
  color: rgb(245, 245, 245);
  font-weight:lighter;
  left: 137px;
  top: 515px;
  transform: rotate(45deg);
  text-shadow: 0 3px 5px rgba(0,0,0,0.7);
}
</style>